<form class="ui form {{if this.isLoading 'loading'}}" autocomplete="off" {{action 'move' 'forwards' on='submit' preventDefault=true}}>

  <div class="ui centered grid">
    <div class="column">
      <div class="ui {{if this.data.event.isBadgesEnabled 'basic'}} segment">
        <div class="center aligned text">
          <div class=" field">
            <div class="d-flex" style="justify-content: center;">
              <UiCheckbox
                @class="ui slider"
                @checked={{if this.data.event.isBadgesEnabled 'active'}}
                @onChange={{action "toggleBadges"}} />
              <label class="weight-300" style="font-size: large">
                {{if this.data.event.isBadgesEnabled (t 'Turn off') (t 'Turn on')}}
                {{t 'Badges'}}
              </label>
            </div>
          </div>
        </div>
      </div>
      <div class="ui center aligned header">
        {{t 'Information about Badge Creator'}}
      </div>
      <div class="ui muted text">
        {{t 'This badge creator lets you position the data that is going to be printed on the badge. Do note that the image is for PREVIEW only and not going to be printed with the data.'}}
      </div>
    </div>
  </div>

  {{#if this.data.event.isBadgesEnabled}}
    <div>
        {{#each this.data.badges as |_badge|}}
          {{#each _badge.badgeForms as |_form|}}
            <div class="ui hidden divider"></div>
            <Forms::Wizard::BadgeForm
              @data={{_form}}
              @selectedTicket={{_badge.ticketsDetails}}
              @customForms={{this.data.customForms}}
              @event={{this.data.event}}
              @move="move" 
              @save="save" 
              @tickets={{this.selectableTickets}}    
              @onFormUpdateTicket={{action 'onFormUpdateTicket'}}
              @id={{_form.badgeID}}
              @onRemoveForm={{action 'onRemoveForm'}}
              @keyDown={{action 'handleKeyDown'}}
              @onPrintPreview={{action 'onPrintPreview'}}
              @isLoading={{this.isLoading}} />
        {{/each}}
      {{/each}}
      {{#if this.selectableTickets.length}}
        <div class="ui hidden divider"></div>
        <button type="button" class="ui primary {{if this.device.isMobile 'small'}} button" {{action 'addBadge'}}>{{t 'Add Another Badge'}}</button>
      {{/if}}
      <div class="spacer-50"></div>
    </div>
  {{else}}
    {{#if this.data.event.isBadgesEnabled}}
      <div class="ui hidden divider"></div>
      <button type="button" class="ui primary {{if this.device.isMobile 'small'}} button" {{action 'addBadge'}}>{{t 'Add Badge'}}</button>
    {{/if}}
    <div class="spacer-50"></div>
  {{/if}}
</form>
<Forms::Wizard::WizardFooter
  @event={{this.data.event}}
  @loading={{this.loading}}
  @device={{this.device}}
  @onSaved={{action 'saveForm'}}
  @onSaveDraft={{action 'saveDraft'}}
  @move={{action 'move'}} />
  
